$(function () {
  console.log(1)
  
  var fordata = [
    {
      id: 1,
      state: 2,
      flowName: '地形测绘',
      childpoint: [
        {
          id: 101,
          state: 2,
          flowName: '业主选择测量单位',
          childpoint: [
            {
              id: 666,
              state: 2,
              flowName: '业主选择测量单位'
            },
            {
              id: 777,
              state: 1,
              flowName: '测量单位进行测量工作,提交成果'
            }
          ]
        },
        {
          id: 102,
          state: 2,
          flowName: '测量单位进行测量工作,提交成果'
        },
        {
          id: 102,
          state: 2,
          flowName: '测量单位进行测量工作,提交成果'
        },
        {
          id: 102,
          state: 2,
          flowName: '测量单位进行测量工作,提交成果'
        },
        {
          id: 102,
          state: 2,
          flowName: '测量单位进行测量工作,提交成果'
        },
        {
          id: 102,
          state: 2,
          flowName: '测量单位进行测量工作,提交成果'
        }
      ]
    },
    {
      id: 2,
      state: 2,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 2,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 2,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 2,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 1,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 1,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    },
    {
      id: 2,
      state: 0,
      flowName: '征地拆迁批',
      childpoint: [
        {
          id: 202,
          state: 0,
          flowName: '组织征地拆迁'
        },
        {
          id: 203,
          state: 0,
          flowName: '组织相关资料'
        },
        {
          id: 204,
          state: 0,
          flowName: '报省国土资源厅'
        }
      ]
    }
  ]
  var str = ''
  for (let i = 0; i < fordata.length; i++) {
    str += `<div
      class="${i < 5 ? fordata[i].state === 0 ? 'topBox gray' : fordata[i].state === 1 ? 'topBox orange' : 'topBox' : i < 10 ? fordata[i].state === 0 ? 'midBox gray' : fordata[i].state === 1 ? 'midBox orange' : 'midBox' : i < 15 ? fordata[i].state === 0 ? 'topBox bottomBox gray' : fordata[i].state === 1 ? 'topBox bottomBox orange' : 'topBox bottomBox' : fordata[i].state === 0 ? 'lastBox  midBox gray' : fordata[i].stat === 1 ? 'lastBox  midBox orange' : 'lastBox  midBox'}">
      <h2>${fordata[i].flowName}</h2>`
    for (let j = 0; j < fordata[i].childpoint.length; j++) {
      // const element = array[j];
      str += `<h3
          class="${fordata[i].childpoint[j].state === 0 ? 'gray bgcgray' : fordata[i].childpoint[j].state === 1 ? 'orange bgcorange' : fordata[i].childpoint[j].state === 2 ? 'bgcgreen' : ''}">
          <i></i>
          <p>${fordata[i].childpoint[j].flowName}</p>
        </h3>`
    }
    str += `</div>`
  }
  // console.log(str)
  $('#bigBox').append(str)
  // $('#bigBox').append(`<!-- 展示颜色对应的状态 -->
  // <div class="showColor" id="showColorFlag">
  //   <span style="display: inline-block; background-color: #71AE21; width: 20px;height: 10px;"></span>
  //   <span>已完成</span>
  //   <br />
  //   <span style="display: inline-block; background-color: #fece61; width: 20px;height: 10px;"></span>
  //   <span>进行中</span>
  //   <br />
  //   <span style="display: inline-block; background-color: #dcdcdc; width: 20px;height: 10px;"></span>
  //   <span>待开启</span>
  // </div>`)
})